<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style>
        .box1{
            width:400px;
            height: 400px;
            /* 背景颜色 */
            background-color: red;
        }
        .box2{
            
            width: 400px;
            height: 400px;
            /* 背景图片 */
            background-image:url("./img/Genshin\ Impact.jpg");

            /* 背景图片如何填充 */
            background-repeat: no-repeat;

            /* 图片大小属性 */
            background-size: cover;
            
            /* 图片显示位置 */
            background-position: center center;
        }
</style>
</head>
<body>
    <div class="box1">demo_div</div>
    <div class="box2">demo2_div</div>
    
</body>
</html>